<template>
	<div class="box1">
		<div
			:ref="'phoneNum' + index"
			class="editable"
			@keyup="
				event => {
					keyUp(event, 'phoneNum' + index, index)
				}
			"
			@click="
				event => {
					clickbtn(event, 'phoneNum' + index, index)
				}
			"
			v-for="(item, index) in state.pohone_Nums"
			:tabindex="index"
			inputmode="numeric"
			:contentEditable="true"
			@input="
				event => {
					num(event, 'phoneNum' + index, index)
				}
			"
		></div>
	</div>
</template>

<script lang="ts">
import { ref, getCurrentInstance, reactive, onMounted } from 'vue'
// import { getCode } from '../utils/code'
export default {
	setup() {
		const state = reactive({
			appname: localStorage.getItem('name'),
			dataList: [] as Array<any>,
			env: import.meta.env.VITE_LOGO,
			url: import.meta.env.VITE_APP_URL,
			BASE_URL: import.meta.env.VITE_APP_BASE_URL,
			loading: true,
			dialogs: false,
			pop: false,
			download: {} as any,
			popbottom: 'bottom' as any,
			type_id: 1 as any,
			yh: false,
			tel: '',
			xy: 0,
			sms_sign: '',
			is_guide: false,
			ab: '',
			is_form: '',
			corporate: '',
			icp: '',
			fund_corp: '重庆宝升小额贷款股份有限公司',
			dsfurl: '',
			szzmf: '',
			is_up_protocol: 1,
			city: '',
			official_info: {
				id: 0,
				name: '公众号',
				url: ''
			},
			pohone_Nums: ['', '', '', '', '', '', '', '', '', '', ''],
			is_smscode: false,
			tx: 0,
			agree: true,
			checked: true,
			identity_num: '',
			active1: '' as any,
			jumpUrl: '',
			channelCode: ''
		})
		const phoneNum0 = ref(null)
		const phoneNum1 = ref(null)
		const phoneNum2 = ref(null)
		const phoneNum3 = ref(null)
		const phoneNum4 = ref(null)
		const phoneNum5 = ref(null)
		const phoneNum6 = ref(null)
		const phoneNum7 = ref(null)
		const phoneNum8 = ref(null)
		const phoneNum9 = ref(null)
		const phoneNum10 = ref(null)
		const phoneNums = reactive({
			phoneNum0,
			phoneNum1,
			phoneNum2,
			phoneNum3,
			phoneNum4,
			phoneNum5,
			phoneNum6,
			phoneNum7,
			phoneNum8,
			phoneNum9,
			phoneNum10
		})
		const ab = async (): Promise<void> => {
			let params = {}
		}

		const {
			appContext: {
				config: { globalProperties }
			},
			refs
		} = getCurrentInstance() as any
		const validatorTel = val => /^1[3456789]\d{9}$/.test(val)

		const pops = () => {
			if (
				localStorage.getItem('channel') === 'C00000087' ||
				localStorage.getItem('channel') === 'PPD000001' ||
				localStorage.getItem('channel') === 'PPD000002' ||
				localStorage.getItem('channel') === 'PPD000003' ||
				localStorage.getItem('channel') === 'PPD000004' ||
				localStorage.getItem('channel') === 'TC0000011' ||
				localStorage.getItem('channel') === 'TC0000012' ||
				localStorage.getItem('is_guide') === 'false'
			) {
				window.history.go(-1)
			}
		}
		const clickxy = i => {
			state.popbottom = 'bottom'
			state.yh = true
			state.xy = i
		}
		const openex = () => {
			state.yh = false
		}

		onMounted(() => {
			ab()
		})
		const num = (e, refId, index) => {
				const { target, data } = e


			//如果有值不能直接修改
			if (state.pohone_Nums[index] === '') {
				state.pohone_Nums[index] = data
        
				//  console.log(e,refId,index, state.pohone_Nums);
				target.innerText = data

        if (phoneNums[refId.replace(index, index + 1)]) {
					phoneNums[refId.replace(index, index + 1)][0].focus()
				}
			
			}else{
        //将此次输入的的值输入到下一个空格
        target.innerText = 	state.pohone_Nums[index] 
        // if (phoneNums[refId.replace(index, index + 1)]) {

				// 	phoneNums[refId.replace(index, index + 1)][0].focus()
				// }

      }
     
		}

		const keyUp = (e, refId, index) => {
			//删除从最后一个没有有的地方开始删除

			if (e.keyCode == 8 || e.keyCode == 46) {
				console.log(e, refId, index, '删除')
				try {
					// const lastHasBlock=state.pohone_Nums.findLastIndex(item=>item!=='')//有些不兼容
					let lastHasBlock = -1

					state.pohone_Nums.forEach((item, index) => {
						if (item !== '') {
							lastHasBlock = index
						}
					})

					if (lastHasBlock > -1) {
						state.pohone_Nums[lastHasBlock] = ''
 
						phoneNums[refId.replace(index, lastHasBlock)][0].innerText = ''
							phoneNums[refId.replace(index, lastHasBlock)][0].focus()
					}
				} catch (error) {
				}
			} else {
        // window.alert(11111)
				//输入时软键盘自动聚焦到
			}
		}
		const clickbtn = (e, refId, index) => {
			const current = state.pohone_Nums[index]
			const emptyBlock = state.pohone_Nums.findIndex(item => item === '')
			if (emptyBlock > -1) {
				phoneNums[refId.replace(index, emptyBlock)][0].focus() //点击任意聚焦到下一个没有输入的地方
			}
			//     if( current===''){
			//         phoneNums[refId.replace(index,0)][0].focus()//点击任意聚焦到0

			//    }
		}
		async function go() {
			// console.log(state.pohone_Nums.join(','))
			const datas = await globalProperties.$http.get(globalProperties.$urls.getJumpUrl)
			if (datas.code === '200') {
				state.channelCode = datas.data.channelCode
			}

			const check = validatorTel(state.pohone_Nums.join(''))
			if (check) {
				let params = {
					phone: state.pohone_Nums.join(''),
					// name: state.username,
					zm_score: state.active1,
					url: window.location.href,
					cid: state.channelCode
				}
				const data = await globalProperties.$http.post(globalProperties.$urls.login, params)
				if (data?.code === '200' && data?.data?.token) {
					state.identity_num = data.data.identity_num

					// if (data?.data?.is_new) {
					//   switch (localStorage.getItem('channel') || 'CS0000099') {
					//   }
					// }
					localStorage.setItem('logintoken', data.data.token)
					localStorage.setItem('phone', state.pohone_Nums.join(''))

					// localStorage.setItem('user_id', data.id)
					// localStorage.setItem('fkjg', data.fkjg)
					// localStorage.setItem('fkyz', data.fkyz)
					// localStorage.setItem('username', state.username)
					localStorage.setItem('ab', state.ab)
					// if (localStorage.getItem('phone') != state.tel) {
					//   localStorage.setItem('phone', state.tel)
					//   localStorage.removeItem('set')
					// }
					// if (state.is_form && state.ab === 'A') {
					//   router.push({
					//     path: '/loading',
					//     query: {
					//       to: 'form',
					//     },
					//   })
					//   return
					// } else {
					//   router.push({ path: '/result' })
					// }
				} else {
					Toast({
						message: data.data.message,
						forbidClick: true
					})
				}
			} else {
				console.log('手机号校验失败')
				Toast('请输入正确的手机号')
				return
			}
		}

		return {
			state,
			pops,
			clickxy,
			openex,
			validatorTel,
			ab,
			num,
			phoneNum0,
			phoneNum1,
			phoneNum2,
			phoneNum3,
			phoneNum4,
			phoneNum5,
			phoneNum6,
			phoneNum7,
			phoneNum8,
			phoneNum9,
			phoneNum10,
			phoneNums,
			clickbtn,
			go,
			keyUp
		}
	}
}
</script>
<style>
div {
	-webkit-user-select: text;
	height: auto;
}
div * {
	-webkit-user-select: text;
}
</style>
<style lang="scss" scoped>
.box1 {
	background: #fff;
	padding: 118px 30px 30px;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	display: flex;
}
.y_s_z_1 {
	margin-top: 20px;
	div {
		font-size: 24px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		color: #aaaaaa;
		line-height: 34px;
		display: inline;
	}

	.y_s_z_1_2 {
		display: inline;
		color: #0256ff;
		font-size: 24px;
	}
}
.guanbi {
	position: absolute;
	top: 40px;
	right: 30px;
	width: 30px;
}
.forward1 {
	width: 100%;
	padding: 110px 0 0;
	position: relative;
	height: 100%;
	&.popcenter {
		width: 640px;
		padding: 70px 0 110px;
		overflow: hidden;
		.title {
			height: 76px;
			position: static;
			width: 100%;
			justify-content: center;
			transform: inherit;
			padding-bottom: 40px;
		}
		.agree {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 110px;
			color: #146eff;
		}
		.xs {
			overflow: auto;
			.xs1 {
				height: initial;
				overflow: initial;
			}
		}
	}
}
.editable {
	border: 1px solid #ccc; /* 设置边框 */
	padding: 5px; /* 设置内边距 */
	width: 60px; /* 设置宽度 */
	height: 80px; /* 设置高度 */
	// resize: both; /* 允许调整大小 */
	overflow: auto; /* 显示滚动条（当内容超出指定尺寸时）*/
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	caret-color: transparent;
	&:focus {
		border-color: #000;
	}
}
</style>
